<template>
	<view class="contain">
		<view class="w-full flex flex-col justify-center items-center" @click="scanQrCode">
			<view class="mt-10"><u-icon name="scan" color="#ff6600" size="160"></u-icon></view>
			<view class="mt-2">点击扫码复制数据</view>
			<view class="mt-2" v-if="tip!=''"><u-button type="primary" text="返回首页" @click="goHome"></u-button></view>
		</view>
		
		<block v-if="objData!=''">
			<!-- 数据信息 -->
			<view class="w-[100%] mt-5" v-if="objData.data!=null">
				<block v-if="objData.data.action==='h2m'">
					当前角色:【{{objData.data.hotName}}】
				</block>
				<block v-else>
					当前角色:【{{objData.data.personalName}}】
				</block>
			</view>
			<view class="w-[100%] mt-5" style="border:1px solid lightgray; word-break: break-all;">{{tip}}</view>
			<view class="w-[100%] mt-5"><u-button type="error" text="清除" shape="circle" @click="clearData"></u-button></view>
		</block>
		
		<!-- 二维码 -->
		<!-- <view v-if="tip!=''" class="w-[50%] flex justify-center items-center mt-2"><u-button type="primary" text="保存二维码到相册" shape="circle" @click="saveQRCode"></u-button></view>
		<view class="mt-2" v-if="tip!=''"><canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas></view> -->
		
	</view>
</template>


<script setup lang='ts'>
import UQRCode from 'uqrcodejs';
import { ref,reactive } from 'vue'
import {  onLoad,onShow } from '@dcloudio/uni-app'
import { userStore } from '@/stores/userStore'
const store = userStore();
let showQrCode=ref(false);
let tip=ref('');
let objData=reactive<any>({data:null});
const scanQrCode=()=>{
	// 允许从相机和相册扫码
	uni.scanCode({
		success:(res)=> {
			console.log('条码类型：' + res.scanType);
			console.log('条码内容：' + res.result);
			tip.value="【二维码扫码内容】"+res.result;
			objData.data=JSON.parse(res.result);
			uni.clearStorageSync(); //移除所有缓存
			uni.setStorageSync("setting",objData.data); 
			//qrCode();
		},
		fail:err=>{
			tip.value="";
		}
	});
}
const goHome=()=>{
	return uni.$tools.GoUrl("/pages/shopindex/index",2);
}
const clearData=()=>{
	
}
onShow(()=>{

});		


const qrCode=()=>{
	uni.hideLoading();
	uni.showLoading({
		title:"正在生成二维码"
	})
  // 获取uQRCode实例
  var qr = new UQRCode();
  // 设置二维码内容
  //qr.data = "https://uqrcode.cn/doc";
  // let obj={
	 //  id:para.data.id,
	 //  role:chinese2english(para.data.role),
	 //  expired:para.data.expiredDate //二维码过期时间
  // }
  qr.data =JSON.stringify(objData.data);
  // 设置二维码大小，必须与canvas设置的宽高一致
  qr.size = 200;
  // 调用制作二维码方法
  qr.make();
  // 获取canvas上下文
  var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
  // 设置uQRCode实例的canvas上下文
  qr.canvasContext = canvasContext;
  // 调用绘制方法将二维码图案绘制到canvas上
  qr.drawCanvas();
  uni.hideLoading();
}
const saveQRCode=async ()=>{
	const tempFilePath = await convertCanvasToTempFilePath();
		  if (tempFilePath) {
			uni.saveImageToPhotosAlbum({
			  filePath: tempFilePath,
			  success: () => {
				uni.showToast({
				  title: '保存成功'
				});
			  },
			  fail: err => {
				uni.showToast({
				  title: '保存失败',
				  icon: 'none'
				});
				console.error(err);
			  }
			});
	}		
}
// 将canvas转换为临时文件路径
const convertCanvasToTempFilePath=()=>{
	  return new Promise((resolve, reject) => {
		const ctx = uni.createCanvasContext('qrcode');
		uni.canvasToTempFilePath({
		  canvasId: 'qrcode',
		  success: res => {
			resolve(res.tempFilePath);
		  },
		  fail: err => {
			reject(err);
		  }
		}, this);
	  });
 }
</script>

<style lang='scss' scoped>
	@import "shop_shop_scanData2SaveLocal.scss";
</style>